<template>
  <view>
    <!-- 1. 头部搜索框 -->
    <ugo-search />
    <!-- 2. tabs 选项卡 -->
    <u-tabs :list="tabList" lineColor="#EB4450" :scrollable="false"></u-tabs>
    <!-- 3. 商品列表 -->
    <view class="goods-list">
      <!-- 商品列表渲染 -->
      <navigator class="goods-item" v-for="item in goodsSearch" :key="item.goods_id" 
       :url="`/goodsPackage/goods_detail/index?goods_id=${item.goods_id}`">
        <image :src="item.goods_big_logo" class="goods-image" mode="aspectFit" />
        <!-- 商品信息 -->
        <view class="goods-info">
          <view class="goods-name">{{ item.goods_name }}</view>
          <view class="goods-price">{{ item.goods_price }}</view>
        </view>
      </navigator>
    </view>
    <!-- 底部提示 -->
    <view v-if="goodsSearch.length === total" style="text-align: center; padding: 10px 0"
      >数据已经到底了，我也是有底线的~</view
    >
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 所有数据条数--商品总数
      total: 0,
      // 查询参数 
      queryParams: {},
      // 商品列表
      goodsSearch: [],
      tabList: [{ name: "综合" }, { name: "销量" }, { name: "价格" }],
    };
  },
  // create() {},
  // 上一个页面传递过来的额参数，怎么拿到？通过onLoad，这也是在页面的vue文件中
  // 钩子函数采用 小程序钩子函数的原因，因为可以拿到页面的传参，而vue的钩子函数拿不到，所以就选了onLoad
  onLoad(options) {
    // console.log(options);
    // 接收上个页面传递过来的查询参数
    this.queryParams = {
      ...options,
      pagenum: 1,
      // pagesize: 20,
      // 测试23条数据 下拉累计加载3页效果  20条数据2页不明显
      pagesize: 10,
    };
    // 发送请求
    this.getGoodsSearch();
  },
  // 是否触底是小程序默认自带的事件，只要当前页面滚动到底部了就会触发
  onReachBottom() {
    // 上拉加载两步走：
    // 1监听onReachBottom  2判断有没有更多数据？有，页码+1，合并数据；没有，提示用户
    console.log('我到底了没有');
    // 怎么样知道数据已经加载完毕了， 当前数组的长度和总数进行比较，
    if (this.goodsSearch.length < this.total) {
      console.log('还有数据没有加载出来，需要继续发请求');
      // 页面+1
      this.queryParams.pagenum++;
      // 重新请求下一页数据
      this.getGoodsSearch();
    } else {
      uni.showToast({
        title: '数据已经到底了-没有更多数据了',
        icon: 'none',
      });
    }
  },
  // 下拉刷新的钩子函数
  async onPullDownRefresh() {
    // 所谓的刷新，就是将所有的数据，重置，清空
    console.log('用户下拉刷新，钩子函数');
    // 重置页码及总条数
    this.queryParams.pagenum = 1;
    // 重置商品数据
    this.goodsSearch = [];
    // 重置商品数据
    this.total = 0;

    // 重新调用数据 得使用 await 等待 数据请求成功在 关闭下拉效果
    // 这个await 一定要加上，不然我们后面的代码不会等请求结束以后执行，会立即执行，效果不好，算一个bug
    await this.getGoodsSearch();

    // 请求发送完毕以后，还需要关闭 下拉刷新的效果. 一定要请求结束以后，在关闭下拉效果
    uni.stopPullDownRefresh();
  },
  // 我们这个时候要去发请求，---- 找后端要接口文档 --- 根据接口文档里面的 url 去起我们自己的方法和变量的名称
  // ---还有一些 入参的名称，我们就在data里面 定义对应的名称
  // /goods/search
  methods: {
    // 根据查询参数获取商品列表
    async getGoodsSearch() {
      // const res = await uni.$u.http.request({
      //   url: '/goods/search',
      //   method: 'POST',
      //   // params 是我们在官方网站看到的 get请求 拼接到 url后面去的一个字段
      //   params: { aaa: 111 },
      //   // 下面的data属性，官网全篇没有提示，我们是凭以前在axios的经验，知道post请求，一般的参数前缀是data
      //   data: { userName: 'name', password: '123456' },
      // });
      const res = await uni.$u.http.request({
        url: '/goods/search',
        // params: { aaa: 111 },
        params: this.queryParams,
      });
      // console.log(111, res);
      // 商品信息
      // this.goodsSearch = res.data.message.goods; 赋值
      // 想要的效果是 累加，不断的累加  将数据合并
      this.goodsSearch.push(...res.data.message.goods);// 累加 将数据合并
      this.total = res.data.message.total;
    },
  },
};
</script>

<style lang="scss">
.goods-list {
  .goods-item {
    display: flex;
    border-bottom: 1rpx solid #ddd;
    padding: 25rpx;
    .goods-image {
      width: 190rpx;
      height: 190rpx;
    }
    .goods-info {
      flex: 1;
      font-size: 24rpx;
      /* 垂直方向两端对齐 */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;
      .goods-name {
        /* 多行超出隐藏 */
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .goods-price {
        color: #eb4450;
        /* 前面的价格符号 */
        &::before {
          content: "￥";
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}
</style>